<script setup>


defineProps({
  productUrl: {
    type: String,
    required: true,
  },
  productImage: {
    type: String,
    required: true,
  },
  productName: {
    type: String,
    required: true,
  },
  brand: {
    type: String,
    required: true,
  },
  price: {
    type: Number,
    required: true,
  },
});
</script>

<template>
  <li>
    <a :href="productUrl">
      <img :src="productImage" />
    </a>
    <h3><a :href="productUrl">{{ productName }}</a></h3>
    <h4>品牌：<a href="#">{{ brand }}</a></h4>
    <p>￥{{ price }}</p>
  </li>
</template>

<style scoped lang="scss">
/*由于原来的样式实在过多并且不好区分，所以该文件的样式已经留在组件ProductList的index.vue文件中*/
</style>
